import React from 'react'

class Life extends React.Component {

    // 创建对象初始化 state
    constructor(pros) {
        super(pros)
        this.state = {
            opacity: 1,
            name: '您好，欢迎光临',
            dates: new Date()
        }
        this.distroyComponent = this.distroyComponent.bind(this)
    }

    // 将要插入回调
    componentWillMount() {
    }

    // 将要被卸载时候
    componentWillUnmount() {
        // 清理定时器
        clearInterval(this.intervalId)
    }

    // 每次更新 state
    componentWillUpdate(nextProps, nextState, nextContext) {
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
    }


    // 已经插入回调
    componentDidMount() {
        // 启动循环定时器
        this.intervalId = setInterval(function () {
            let {opacity} = this.state
            console.log("定时器执行。。。")
            opacity -= 0.1
            if (opacity <= 0) {
                opacity = 1
            }
            this.setState({opacity})
            this.setState({dates: new Date()})
        }.bind(this), 200)
    }


    distroyComponent() {
        alert("将要清理定时器" + this.intervalId)
        // clearInterval(this.intervalId)
    }

    // 第一次初始化渲染显示
    render() {
        const {opacity} = this.state
        const {name} = this.state
        return (
            <div>
                <h2 style={{opacity: opacity}}>{name}</h2>
                <h2>{this.state.dates.toTimeString()}</h2>
                <button onClick={this.distroyComponent}>点我</button>
            </div>
        )
    }

}

// function Index() {
//     return (
//         <div>
//             <h2></h2>
//             <li>面板</li>
//         </div>
//     )
// }

export default Life